<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form divClass" v-if="headerShow" style="display: inline-block">
        <div>
          <a-form size="small" :model="pageData" layout="inline" v-if="permissionStore.hasPermisson('tjjlcx.cx')">
            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="调机单号">
              <!-- <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" :loading="loading"
                                @search="handleSearch(pageData.adjustmentCode, 1)" v-model="pageData.adjustmentCode"
                                :filter-option="false" allow-search allow-clear @focus="focusSel({ adjustmentCode: '' })">
                                <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
                            </a-select> -->
              <a-input allow-clear :style="{ width: '250px' }" class="bacClass" placeholder=""
                v-model="pageData.adjustmentCode" @press-enter="huiche" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="生产单号">
              <!-- <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" :loading="loading"
                                @search="handleSearch(pageData.weaveCode, 2)" v-model="pageData.weaveCode"
                                :filter-option="false" allow-search allow-clear @focus="focusSel({ weaveCode: '' })">
                                <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
                            </a-select> -->
              <a-input allow-clear :style="{ width: '280px' }" label-col-flex="100px" class="bacClass" placeholder=""
                v-model="pageData.weaveCode" @press-enter="huiche" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="织布单号">
              <!-- <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" :loading="loading"
                                @search="handleSearch(pageData.planOrderCode, 3)" v-model="pageData.planOrderCode"
                                :filter-option="false" allow-search allow-clear @focus="focusSel({ planOrderCode: '' })">
                                <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
                            </a-select> -->
              <a-input allow-clear :style="{ width: '250px' }" class="bacClass" placeholder=""
                v-model="pageData.planOrderCode" @press-enter="huiche" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="坯布编号">
              <!-- <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" :loading="loading"
                                @search="handleSearch(pageData.greyCode, 4)" v-model="pageData.greyCode"
                                :filter-option="false" allow-search allow-clear @focus="focusSel({ greyCode: '' })">
                                <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
                            </a-select> -->
              <a-input allow-clear :style="{ width: '250px' }" class="bacClass" placeholder="" v-model="pageData.greyCode"
                @press-enter="huiche" />
            </a-form-item>
            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="坯布名称">
              <!-- <a-select popup-container="html"  :style="{ width: '200px' }" class="bacClass" :loading="loading"
                                @search="handleSearch(pageData.grayName, 5)" v-model="pageData.grayName"
                                :filter-option="false" allow-search allow-clear @focus="focusSel({ grayName: '' })">
                                <a-option v-for="item in pageData.nameList" :value="item">{{ item }}</a-option>
                            </a-select> -->
              <a-input allow-clear :style="{ width: '250px' }" class="bacClass" placeholder="" v-model="pageData.grayName"
                @press-enter="huiche" />
            </a-form-item>

            <a-form-item :style="{ width: '280px' }" label-col-flex="100px" label="日期">
              <a-date-picker  popup-container="html"  :style="{ width: '250px' }" class="bacClass" v-model="pageData.startTime" />
            </a-form-item>
          </a-form>
        </div>
      </div>

      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up v-if="headerShow" @click="headerShow = false" :strokeWidth="2" :size="18" />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
      <div class="my-tool-bar">
        <Toolbar :items="pageData.btnList" @select="selectHandler" @export="exports"> </Toolbar>
      </div>
    </template>
    <template #pageTabel>
      <!-- <a-tabs   :justify="true">
                    <a-tab-pane title="调机记录查询"> -->
      <!-- <a-table style="height:100%" size="mini" :scrollbar="true" sticky-header
                            @page-change="pagination.change" stripe :bordered="true" :columns="tableColumns"
                            :row-selection="{ showCheckedAll: true, width: 50, onlyCurrent: true }"
                            v-model:selected-keys="selectedRowKeys" :loading="pageData.pageLoading" :data="table.dataList"
                            :pagination="false"
                            :rowKey="rowKey">

                        </a-table> -->
      <a-spin :loading="pageData.pageLoading" tip="加载中" dot style="height: 100%; width: 100%; z-index: 999">
        <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true"
          :suppressDragLeaveHidesColumns="true" rowSelection="multiple" @grid-ready="gridReady"
          @columnResized="onColumnResized" @columnMoved="onColumnMoved" @columnVisible="onColumnVisible"
          style="height: 100%" :defaultColDef="defaultColDef" class="ag-theme-alpine" :rowData="table.dataList"
          :columnDefs="tc" :localeText="localeText1"></AgGridVuesCopys>
      </a-spin>
      <!-- </a-tab-pane>
                </a-tabs> -->
    </template>
    <paginationCopys :total="total" show-total show-jumper show-page-size @change="PageSize" @page-size-change="change1"
      style="justify-content: center" :page-size="pagination.pageSize" :current="pagination.page"
      :page-size-options="pagingList1" />
  </pageTabelLayout>
  <a-modal v-model:visible="picDetailShow"  hide-cancel
 @ok="picDetailShow=false" ok-text='关闭'>
    <template #title>
      图片详情
    </template>
    <div v-if='pictures.length>0' class='w-full h-[300px] '>
      <div v-for="picPath in pictures" class="flex w-full overflow-hidden flex-wrap	">
              <a-image :src="baseURL + '/minio/file/download/zzy/'+picPath.pictureAddres" style="width: 80px; height: 120px;margin:5px 5px" fit="fill" show-loader/>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无图片" />
    </div>
  </a-modal>
</template>

<script lang="ts">
import { post } from '@/api/http'
import { useTable, useRowKey, useTableColumn, usePagination, useRowSelection } from '@/hooks/table'
import emitter from '@/hooks/useEventBus'
import { ref, reactive, onMounted, toRefs } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { Form, Message, Modal } from '@arco-design/web-vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import axios from 'axios'
import filedownload from 'js-file-download'
import { EXELTABLE } from '@/utils/exportEXCEL';
import usePermission from '@/store/modules/permission'
import PageTabelLayout from '@/components/pageTabelLayout.vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import {baseURL} from '@/api/axios.config'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
export default {
  name: 'CxRecord',
  setup() {
    const headerShow = ref<boolean>(true)
    const total = ref(0)
    const page = ref(1)
    const size = ref(10)
    function PageSize(val: any) {
      pagination.page = val
      doRefresh()
    }

    function change1(val: any) {
      pagination.pageSize = val
      doRefresh()
    }
    function doRefresh() {
      pageData.pageLoading = true
      updateGridState01()
      post({
        url: 'planSingle/adjustmentStandard/getPage',
        data: {
          page: pagination.page,
          size: pagination.pageSize,
          deleteState: '0',
          adjustmentCode: pageData.adjustmentCode,
          weaveCode: pageData.weaveCode,
          planOrderCode: pageData.planOrderCode,
          greyCode: pageData.greyCode,
          grayName: pageData.grayName,
          startTime: pageData.startTime,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            table.handleSuccess(data.list)
            // pagination.setTotalSize(data.total);
            gridOption.value.setRowData(data.list)
            total.value = data.total
          }
        })
        .catch(console.log)
        .finally(() => {
          pageData.pageLoading = false
        })
    }
    //查询
    const selectHandler = () => {
      pagination.page = 1
      doRefresh()
    }
    const { selectedRowKeys, onSelectionChange } = useRowSelection()
    const pagination = usePagination(doRefresh)
    const table = useTable()
    const rowKey = useRowKey('id')
    const tableColumns = useTableColumn([
      {
        title: '公司',
        key: 'firm',
        dataIndex: 'firm',
        width: 150,
      },
      {
        title: '机台号',
        key: 'machineCode',
        dataIndex: 'machineCode',
        width: 150,
        // slotName: 'machineCode',
      },
      {
        title: '调机单号',
        key: 'adjustmentCode',
        dataIndex: 'adjustmentCode',
        width: 150,
      },

      {
        title: '生产单号',
        key: 'weaveCode',
        dataIndex: 'weaveCode',
        width: 150,
      },
      {
        title: '织布单号',
        key: 'planOrderCode',
        dataIndex: 'planOrderCode',
        width: 150,
      },
      {
        title: '坯布编号',
        key: 'greyCode',
        dataIndex: 'greyCode',
        width: 150,
      },
      {
        title: '坯布名称',
        key: 'grayName',
        dataIndex: 'grayName',
        width: 150,
      },
      {
        title: '布匹宽度',
        key: 'clothRackWidth',
        dataIndex: 'clothRackWidth',
        width: 150,
      },
      {
        title: '针叶型号',
        key: 'needleModelNo',
        dataIndex: 'needleModelNo',
        width: 150,
      },
      {
        title: '织针类型',
        key: 'needleModel',
        dataIndex: 'needleModel',
        width: 150,
      },
      {
        title: '机速',
        key: 'engineSpeed',
        dataIndex: 'engineSpeed',
        width: 150,
      },
      {
        title: '油速',
        key: 'oilVelocity',
        dataIndex: 'oilVelocity',
        width: 150,
      },
      {
        title: '筒高',
        key: 'barrelHeight',
        dataIndex: 'barrelHeight',
        width: 150,
      },
      {
        title: '织针1段',
        key: 'needleOnePerod',
        dataIndex: 'needleOnePerod',
        width: 150,
        slotName: 'needleOnePerod',
      },

      {
        title: '织针2段',
        key: 'needleTwoPerod',
        dataIndex: 'needleTwoPerod',
        width: 150,
        slotName: 'needleTwoPerod',
      },
      {
        title: '织针3段',
        key: 'needleThreePerod',
        dataIndex: 'needleThreePerod',
        width: 150,
        slotName: 'needleThreePerod',
      },
      {
        title: '织针4段',
        key: 'needleFourPerod',
        dataIndex: 'needleFourPerod',
        width: 150,
        slotName: 'needleFourPerod',
      },
      {
        title: '争食',
        key: 'dodge',
        dataIndex: 'dodge',
        width: 150,
        slotName: 'dodge',
      },
      {
        title: '分食',
        key: 'broken',
        dataIndex: 'broken',
        width: 150,
        slotName: 'broken',
      },
      {
        title: '不争不分',
        key: 'allTrue',
        dataIndex: 'allTrue',
        width: 150,
        slotName: 'allTrue',
      },
      {
        title: '布加张力A-D',
        key: 'clothTensionAD',
        dataIndex: 'clothTensionAD',
        width: 150,
      },
      {
        title: '布加张数1-16',
        key: 'clothTensionOS',
        dataIndex: 'clothTensionOS',
        width: 150,
      },
      {
        title: '底座垫片',
        key: 'baseGasket',
        dataIndex: 'baseGasket',
        width: 150,
      },
      {
        title: '送纱盘-中盘',
        key: 'sandTrayMiddlePlate',
        dataIndex: 'sandTrayMiddlePlate',
        width: 150,
      },
      {
        title: '送纱盘-面盘',
        key: 'sandTableSurfacePlate',
        dataIndex: 'sandTableSurfacePlate',
        width: 150,
      },
      {
        title: '送纱盘-底盘',
        key: 'sandDownSurfacePlate',
        dataIndex: 'sandDownSurfacePlate',
        width: 150,
      },
      {
        title: '齿轮',
        key: 'gear',
        dataIndex: 'gear',
        width: 150,
      },
      {
        title: '调机日期',
        key: 'startTime',
        dataIndex: 'startTime',
        width: 150,
      },
      {
        title: '实开路数',
        key: 'actualOpenWay',
        dataIndex: 'actualOpenWay',
        width: 150,
      },
      {
        title: '图片详情',
        key: 'pictureDetail',
        dataIndex: 'pictureDetail',
        slotName: 'pictureDetail',
        width: 150,
      },
    ])

    let tc: any[] = tableColumns.map((o) => {
      let obj = {
        headerName: o.title,
        field: o.key,
        pinned: o['fixed'],
        tooltipField: o.key,
      }

      if (o.slotName === 'needleOnePerod') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.needleOnePerod != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'needleTwoPerod') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.needleTwoPerod != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'needleThreePerod') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.needleThreePerod != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'needleFourPerod') {
        obj['resizable'] = false
        obj['filter'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.needleFourPerod != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'dodge') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.dodge != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'broken') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.broken != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'allTrue') {
        obj['resizable'] = false
        obj['sortable'] = false

        obj['cellRenderer'] = {
          template: `<span color="#ff7d00">{{val}}</span>`,
          setup(props: any) {
            let val = ref()
            if (props.params.data.allTrue != 1) {
              val.value = ''
            } else {
              val.value = '✔'
            }

            return {
              val,
            }
          },
        }
        obj['filterParams'] = {
      valueFormatter: function (params: any) {
        return params.value == '1'
          ? '✔'
          : ''
      },
    }
      }
      if (o.slotName === 'pictureDetail') {
        obj['resizable'] = false
        obj['sortable'] = false
        obj['filter'] = false
        obj['cellRenderer'] = {
          template: `<el-button  @click="detail" :style="{color:'#165dff'}" link>
                详情
              </el-button>`,
          setup(props: any) {
            let val = ref()
            const detail = ()=>{
              getPicDetail(props.params.data.id)
            }
            return {
              val,
              detail,
              getPicDetail
            }
          },
        }
      }
      return obj
    })

    let a = [
      {
        showRowGroup: 'hide_def',
        headerName: '',
        checkboxSelection: true,
        headerCheckboxSelection: true,
        pinned: 'left',
        width: 50,
        resizable: false,
        filter: false,
        sortable: false,
        minWidth: 50,
        maxWidth: 50,
        lockPosition: 'left',
      },
    ]
    tc = a.concat(tc)
    //图片
    const getPicDetail = (id)=>{
      post({
        url: 'planSingle/adjustment/getDispatchByAdjustmentId',
        data: {adjustmentId: id},
      }).then(({code, data, message}: any) => {
        if (code === 200) {
          
          if (data['adjustmentStandardImage']?.length>0) {
                pictures.value = data['adjustmentStandardImage']
              }else{
                pictures.value = []
              }
            picDetailShow.value = true
        } else {
          Message.error({
            content: message,
            duration: 5000,
          })
        }
      })
    }
    const picDetailShow = ref(false)
    const pictures = ref([])
    const pageData = reactive<{
      dropDownData: any
      nameList: []
      pageLoading: boolean
      typeList: []
      dropDownData1: any
      rHeight: any
      btnList: any[]
      isEdit: boolean
      adjustmentCode: any
      weaveCode: any
      planOrderCode: any
      greyCode: any
      grayName: any
      startTime: any
    }>({
      nameList: [],
      dropDownData: '',
      pageLoading: false,
      typeList: [],
      dropDownData1: '',
      rHeight: 0,
      btnList: [],
      isEdit: false,
      adjustmentCode: '',
      weaveCode: '',
      planOrderCode: '',
      greyCode: '',
      grayName: '',
      startTime: '',
    })
    // 表格准备事件
    const gridOption = ref()
    const colState = ref()
    const gridReady = (params: any) => {
      gridOption.value = params.api
      colState.value = params.columnApi
    }

    //下拉框得到焦点
    const focusSel = (ob: any) => {
      selCxAll(ob)
    }
    //下拉数据
    const options = ref<any>(pageData.nameList)
    const loading = ref(false)
    const handleSearch = (value: any, num: any) => {
      if (value) {
        const ob = {}
        if (num == 1) {
          ob['adjustmentCode'] = value
        } else if (num == 2) {
          ob['weaveCode'] = value
        } else if (num == 3) {
          ob['planOrderCode'] = value
        } else if (num == 4) {
          ob['greyCode'] = value
        } else if (num == 5) {
          ob['grayName'] = value
        }

        loading.value = true
        selCxAll(ob)
        options.value = pageData.nameList
        loading.value = false
      } else {
        options.value = []
      }
    }

    //下拉框查询
    function selCxAll(val: any) {
      post({
        url: 'planSingle/adjustmentStandard/getFieldValue',
        data: val,
      }).then(({ data, code }: any) => {
        if (code === 200) {
          pageData.nameList = data
        } else {
          Message.error({
            content: '查询失败！',
            duration: 5000,
          })
        }
      })
    }

    onMounted(() => {
      doRefresh()
    })

    //导出
    const exports = () => {
      post({
        url: '/planSingle/adjustmentStandard/getExportExcel',
        data: {
          deleteState: '0',
          adjustmentCode: pageData.adjustmentCode,
          weaveCode: pageData.weaveCode,
          planOrderCode: pageData.planOrderCode,
          greyCode: pageData.greyCode,
          grayName: pageData.grayName,
          startTime: pageData.startTime,
        },
      })
        .then(({ data, code }: any) => {
          if (code === 200) {
            EXELTABLE(tc, data, '调机记录查询')
          }
        })
    }
    const defaultColDef = {
      sortable: true,
      resizable: true,
      filter: true,
      // flex: 1
    }
    const localeText1: any = ref(localeText)
    const huiche = () => {
      doRefresh()
    }
    const pagingList1: any = ref(pagingList)
    const permissionStore = usePermission()

    if (permissionStore.hasPermisson('tjjlcx.cx')) {
      pageData.btnList.push('查询')
    }
    if (permissionStore.hasPermisson('tjjlcx.dc')) {
      pageData.btnList.push('导出')
    }
    const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('CxRecord-1', gridOption, colState, tc)
    const onColumnMoved = () => {
      saveGridState01()
    }
    const onColumnResized = () => {
      saveGridState01()
    }
    const onColumnVisible = () => {
      saveGridState01()
    }
    return {
      saveOrUpdateGridState01,
      saveGridState01,
      updateGridState01,
      onColumnMoved,
      onColumnResized,
      onColumnVisible,
      colState,
      pagingList1,
      huiche,
      localeText1,
      defaultColDef,
      tc,
      gridOption,
      gridReady,
      total,
      selectHandler,
      selectedRowKeys,
      pagination,
      tableColumns,
      table,
      rowKey,
      pageData,
      exports,
      options,
      loading,
      handleSearch,
      focusSel,
      headerShow,
      PageSize,
      permissionStore,
      change1,
      picDetailShow,
      pictures,
      getPicDetail,
      baseURL
    }
  },
  components: { Toolbar, PageTabelLayout,  },
}
</script>
